<template>
	<view class="container_com">
		<view class="can_book_time">
			<text>已預訂時段</text>
			<text>可預訂時段</text>
		</view>
		<view class="book_state box" v-if="timeStampList.length">
			<view style="display: flex;">
				<view v-for="(item,index) in timeStampList" :key="index"
					:style="{width:100/timeStampList.length + '%' }" style="border: 1rpx solid #707070;height: 30rpx;">
					<view class="" v-for="(deepItem,dindex) in colorDeepStamp" :key="dindex">
						<view v-if="item>=deepItem.start && item<=deepItem.end" class="deep"></view>
					</view>
				</view>
			</view>
			<view class="item">
				<view :style="{width:100/num_time.length + '%' }" v-for="(item,index) in num_time" :key="index">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "appointmentPeriod",
		props: {
			details: Object,
			config: Object,
		},
		data() {
			return {
				num_time: [],
				timeStampList: [],
				colorDeep: [{
						start: 10,
						end: 13
					},
					{
						start: 19,
						end: 21
					}
				],
				colorDeepStamp: [],
			};
		},
		methods:{
			
		}
	}
</script>

<style lang="less">
	.container_com {
		.can_book_time {
			display: flex;
			justify-content: space-around;
			margin-bottom: 29rpx;

			text {
				font-size: 17rpx;
				// margin-left: 7rpx;
				display: flex;
				align-items: center;

				&::before {
					content: "";
					display: inline-block;
					width: 30rpx;
					height: 30rpx;
					background: #39B19D;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
					border: 1rpx solid #707070;
					margin-right: 7rpx;
				}

				&:last-child::before {
					background-color: #fff;
				}
			}
		}

		.book_state {
			padding: 0 11rpx;
			box-sizing: border-box;

			.deep {
				background: #39B19D;
				height: 30rpx;
			}

			.item {
				display: flex;
				font-size: 17rpx;
				text-align: center;
			}
		}
	}
</style>